<template>
	<view class="jf-falls" :style="{'--box-width': props.width, '--box-left': props.marginLeft}">
		<view class="jf-falls__lists" :style="{'--column': props.column, '--gap': props.gap,'height': data.maxHeight + 'px'}">
			<view class="jf-falls__list" :style="{'--index': indexs}" v-for="(items, indexs) in data.lists" :key="indexs">
				<slot v-for="(item,index) in items.list" name="scope" :item="item" :index="index" :key="index"></slot>
			</view>
		</view>
		<view class="jf-falls__loading-init" v-if="props.loading || props.loadEnd || props.loadError" :style="{'minHeight': props.total === 0 ? '600rpx' : '100rpx'}">
			<slot name="loading" v-if="props.loading">
				<view class="jf-falls__loading"></view>
			</slot>
			<view @click="load()" v-if="props.loadEnd && props.total === 0">
				<slot name="loadNone">
					<view class="jf-falls__load-text">{{props.loadNoneText}}</view>
				</slot>
			</view>
			<view v-if="props.loadEnd && props.total > 0">
				<slot name="loadEnd">
					<view class="jf-falls__load-text">{{props.loadEndText}}</view>
				</slot>
			</view>
			<view @click="load()" v-if="props.loadError">
				<slot name="loadError">
					<view class="jf-falls__load-text">{{props.loadErrorText}}</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, watch, getCurrentInstance, onMounted } from 'vue';
	
	const { proxy } = getCurrentInstance()
	let query = uni.createSelectorQuery().in(proxy).selectAll('.jf-falls__list')
	const props = withDefaults(defineProps<{
		list: any[]
		loading?: boolean
		loadEnd?: boolean
		loadError?: boolean
		loadNoneText?: string
		loadEndText?: string
		loadErrorText?: string
		interval?: number
		total?: number
		width?: string
		marginLeft?: string
		column?: number
		gap?: string
	}>(),{
		list: () => [],
		loading: false,
		loadEnd: false,
		loadError: false,
		loadNoneText: "暂无数据",
		loadEndText: "暂无更多",
		loadMoreText: "加载更多",
		loadErrorText: "加载失败",
		interval: 100,
		total: 0,
		width: '686rpx',
		marginLeft: '32rpx',
		column: 2,
		gap: '18rpx'
	})
	const emits = defineEmits<{
		(e:"update:loading", status: boolean):void
		(e:"loadEnd"):void
		(e:"load"):void
	}>()
	const data = reactive({
		index: 0,
		lists: [],
		maxHeight: 0,
		loadEnd: false
	})
	
	const init = ():void => {
		data.lists = []
		data.index = 0;
		data.maxHeight = 0;
		for(let i = 0;i < props.column;i++){
			data.lists.push({
				height: 0,
				list: []
			})

		}
		//console.log('deal1111111111111',data.lists[0].list);
	}
	const deal = async():void => {
		if (data.index < props.list.length) {
			console.log('props.list.length---------------',props.list.length);
		
			// #ifdef APP-PLUS
				query = uni.createSelectorQuery().in(proxy).selectAll('.jf-falls__list')
			// #endif
			data.loadEnd = false
			const item = props.list[data.index]
			let current = 0
			let minHeight =data.lists[0].height
			for(let i = 0;i< data.lists.length;i++){
				if(data.lists[i].height < minHeight){
					minHeight = data.lists[i].height
					current = i
				}
			}
			
			data.lists[current].list.push(item)
			// setTimeout(()=>{
			// 	query.boundingClientRect((result:any) => {
			// 		for(let i = 0;i< result.length;i++){
			// 			data.lists[i].height = result[i].height
			// 			if(result[i].height > data.maxHeight)data.maxHeight = result[i].height
			// 		}
			// 		data.index += 1
			// 		deal()
			// 	}).exec()
			// },props.interval)

				const result = await getAllData()
				console.log("result",result)
				for(let i = 0;i< result.length;i++){
						data.lists[i].height = result[i].height
						if(result[i].height > data.maxHeight)data.maxHeight = result[i].height
					}
					data.index += 1
					deal()
			// console.log('data.lists',data.lists[0].list);
		}else{
			data.loadEnd = true
			emits("loadEnd")
		}
}
const getAllData = (): void => {
	return new Promise((resolve:any, reject:any):void => {
		setTimeout(()=>{
				query.boundingClientRect((result:any) => {
					resolve(result)
				}).exec()
			},props.interval)
	})
 }
	const load = ():void => {
		emits('load')
	}
	
	watch(() => props.list,( nVal ):void => {
		if (nVal.length === 0) init()
		deal()
	})
	onMounted(() => {
		init()
		deal()
	})
</script>

<style lang="scss">
	.jf-falls{
		width: var(--box-width);
		margin-left: var(--box-left);
		.jf-falls__lists{
			--width-item: calc((var(--box-width) - (var(--column) - 1) * var(--gap)) / var(--column));
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: var(--box-width);
			.jf-falls__list{
				position: absolute;
				width: var(--width-item);
				left: calc(var(--index) * (var(--width-item) + var(--gap)));
			}
		}
		.jf-falls__loading-init{
			width: 100%;
			min-height: 600rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		.jf-falls__load-text{
			font-weight: 400;
			color: #B2B9C6;
			line-height: 32rpx;
			font-size: 24rpx;
		}
		.jf-falls__loading{
			--borderColor: #cccccc;
			position: relative;
			width: 36rpx;
			height: 36rpx;
			/*只需要一条边显现*/
			/*将其它边设置透明*/
			border: 4rpx solid transparent;
			/*显示顶部边*/
			border-top-color:var(--borderColor);
			border-radius: 50%;
			animation: rotate 2.2s linear infinite;
			margin-right: 20rpx;
			&::before{
				content: '';
				position: absolute;
				top: 3rpx;
				right: 3rpx;
				bottom: 3rpx;
				left: 3rpx;
				border: 4rpx solid transparent;
				/*显示顶部边*/
				border-top-color:var(--borderColor);
				border-radius: 50%;
				animation: rotate 1.6s linear infinite;
			}
			&::after{
				content: '';
				position: absolute;
				top: 9rpx;
				right: 9rpx;
				bottom: 9rpx;
				left: 9rpx;
				border: 4rpx solid transparent;
				/*显示顶部边*/
				border-top-color:var(--borderColor);
				border-radius: 50%;
				animation: rotate 1s linear infinite;
			}
		}
	}
	
	/*定义动画*/
	@keyframes rotate {
	    0%{
	        transform: rotate(0);
	    }
	    100%{
	        /*顺时针转360*/
	        transform: rotate(360deg);
	    }
	}
</style>
